<template>
  <div class="balance-list-wrapper">
    <ul class="tags-tab">
      <li @click="switchActive(0)" :class="['tag-item', 'tag-align-center', activeIndex == 0 ? 'tag-selected' : '']">收入</li>
      <li @click="switchActive(1)" :class="['tag-item', 'tag-align-center', activeIndex == 1 ? 'tag-selected' : '']">支出</li>
    </ul>
    <van-pull-refresh v-model="isRefreshing">
    <van-cell-group v-waterfall-lower="loadMoreData" waterfall-disabled="disabled" waterfall-offset="400">
      <van-cell v-for="(item, index) in dataList[activeIndex].results" :title="item.text" :key="index" label="2017-12-12" isLink>
        <template>
        <img slot="icon" src="../../../assets/icon/icon_dollor.png" name="search" class="left-cell-icon" />
        <span class="van-cell__value--enhance">￥{{ item.amount }}</span>
        </template>
      </van-cell>
    </van-cell-group>
    <blank-content v-if="!dataList[activeIndex].results.length" text="暂无记录"></blank-content>
    </van-pull-refresh>
  </div>
</template>

<script>
import Vue from 'vue'
import qs from 'qs'

import Waterfall from '@/components/vant/waterfall'
import BlankContent from '@/components/blankContent'

Vue.component(BlankContent.name, BlankContent)

import { mapGetters } from 'vuex'

export default {
  name: 'Balance',
  data () {
    return {
      activeIndex: 0,
      isRefreshing: false,
      disabled: true,
      dataList: [{ results: [] }, { results: [] }]
    }
  },
  created () {
    this.getData()
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  watch: {
    isRefreshing() {
      if (this.isRefreshing) {
        this.refreshData()
      }
    }
  },
  directives: {
    WaterfallLower: Waterfall('lower')
  },
  methods: {
    switchActive(index) {
      this.activeIndex = index
      var data = this.dataList[index]
      if (!data.results.length) {
        this.getData()
      }
    },
    refreshData() {
      var that = this
      this.dataList[this.activeIndex] = { results: [] }
      this.getData(null, function() {
        that.isRefreshing = false
      })
    },
    loadMoreData() {
      var data = this.dataList[this.activeIndex]
      if (data.next) {
        this.getData(data.next)
      }
    },
    getData(next=null, callback=null) {
      var params = { type: this.activeIndex }
      var url = '/finances/flow/'
      if (next) {
        url = next
      }
      this.$toast.loading()
      var data = this.dataList[this.activeIndex]
      var that = this
      // 调用登陆接口
      this.axios.get(url, { params: params })
      .then(function (res) {
        that.$toast.clear()
        console.log(res.data)
        if (res.status === 200) {
          data.count = res.data.count
          data.next = res.data.next
          data.previous = res.data.previous
          data.results = data.results.concat(res.data.results)
        }
        if (callback) {
          return callback()
        }
      })
      .catch(function (error) {
        that.$toast.clear()
        console.log(error)
      })
    },
  }
}

</script>

<style lang="scss">
  .left-cell-icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: middle;
  }
</style>
